<template>
  <div class="index"
  v-loading="loading"
  element-loading-text="拼命加载中" >
    <div class="typo-PingFang tit"><i class="el-icon-edit"></i>名称</div>
    <div class="head">
      <img :src="url">
    </div>
    <div class="inn"><el-input placeholder="your name." v-model="name" ></el-input></div>
    <div class="next"><el-button size="small" @click="next_get">进入</el-button></div>
  </div>
</template>

<script>
import API from "axios"
export default {
  data() {
    return {
      loading: true,
      url: '',
      name: ''
    }
  },
  methods: {
    qq() {
      this.pla = 'QQ'
      this.sty.g = {}
      this.sty.qaq = {opacity: 1}
    },
    ava() {
      this.pla = 'Email'
      this.sty.qaq = {}
      this.sty.g = {opacity: 1}
    },
    // 根据URL获取用户头像
    next_get() {
      if(this.name != "") {
        // login
        var name_reg = /[\/\?\:\@\&\=\+\$\#]/
        if(name_reg.test(this.name)){
          this.$message.error('名字中不能包含特殊字符呢')
          return
        }
      this.$router.push('/chat/'+this.name+'/'+encodeURIComponent(this.url)+'/'+(new Date()).valueOf())
      return
      }
      this.$message.error('请点填写用户名')
    }
  },
  created: function() {
    API.get(initData.api + 'index/getImg?type=1&uri=' + this.$route.params['url']).then(response => {
      this.url = response.data.result
      this.loading = false
    })
  }
}
</script>

<style>
.index{
  padding: 30px 70px 50px 70px;
}
.tit {
  padding-bottom: 20px;
  color: #303133;
  font-size: 15px
}
.tit i {
  padding-right: 5px
}
.head, .inn, .next {
  text-align: center
}
.head img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 10px 20px;
  cursor: pointer;
}
.inn {
  margin-bottom: 30px;
}
.inn input{
  width: 200px;
}
</style>